<template>
	<view class="page-actions" v-if="actionsSheetOptions.length">
		<view class="actions">
			<view class="this-body" v-for="(one, index) of actionsSheetOptions" :key="index">
				<view class="title-box">
					<view class="name">{{ one.title || '温馨提示' }}</view>
					<view
						class="iconfont icon-close"
						v-if="one.allowedClose"
						@click="close(one, index)"
					></view>
				</view>
				<view class="content" v-if="one.content">{{ one.content }}</view>
				<view class="ul with-have-no-mt">
					<view
						class="li-box"
						@click="ok(one, two, index, index2)"
						v-for="(two, index2) of one.list"
					>
						<view class="li" @click="two.clickCallBack ? two.clickCallBack() : '';close(one, index)">
							<view class="name" style="flex: 1;">{{ two.name }}</view>
							<view class="more iconfont" style="font-size: 20upx;">&#xe856;</view>
						</view>
					</view>
					<view class="li-box" v-if="one.allowedClose" @click="close(one, index)">
						<view class="li" :class="[one.type || 'info']">
							<view class="name">{{ one.chanelText || '取消操作' }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	computed: {
		actionsSheetOptions() {
			return this.$store.state.actionsSheetOptions;
		}
	},
	data() {
		return {};
	},
	created() {
	},
	methods: {
		ok(one, two, index, index2) {
			two.callBack ? two.callBack() : '';
			// this.$store.state.actionsSheetOptions.splice(index, 1);
		},
		close(one, index) {
			this.$store.state.actionsSheetOptions.splice(index, 1);
		}
	}
};
</script>

<style lang="scss" scoped="">
.page-actions {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1001;
	.li {
		&.success {
			color: $juhe-success-color;
		}
		&.info {
			color: $uni-text-color;
		}
		&.warning {
			color: $juhe-warning-color;
		}
		&.danger {
			color: $juhe-danger-color;
		}
	}
	.actions {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		background-color: rgba($color: #000000, $alpha: 0.4);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		overflow-y: auto;
		overflow-scrolling: touch;
		-webkit-overflow-scrolling: touch;

		.this-body {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #fff;
			color: $uni-text-color;
			font-size: $uni-font-size-lg;

			.title-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20upx 20upx;
				font-size: 40upx;
				.iconfont {
					color: $uni-text-color-disable;
				}
			}

			.content {
				text-align: left;
				padding: 20upx;
				color: $uni-text-color-grey;
				border-bottom: 1upx solid #ddd;
			}
		}
	}
}
</style>
